<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      顾客管理
    </div>
    <div style="margin-left: 400PX">
      <el-button type="primary" @click="addButton"
                 style="margin-left: 40px">新增
      </el-button>
      <el-input v-model="customerName" placeholder="顾客名称"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="phoneNumber" placeholder="电话号码"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="identificationCard" placeholder="身份证号"
                style="width: 200px;margin-left: 40px" clearable/>

      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px">查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="selectList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="customerId" sortable label="顾客ID"/>
        <el-table-column align="center" fixed prop="customerName" sortable label="顾客名称"/>
        <el-table-column align="center" fixed prop="sex" sortable label="性别"/>
        <el-table-column align="center" fixed prop="phoneNumber" sortable label="电话号码"/>
        <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
        <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
        <el-table-column align="center" fixed="right" label="操作">
          <template v-slot="scope">
            <!--传入的scope.row参数为当前行的数据-->
            <el-button @click="updateButton(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!--新增弹窗-->
      <el-dialog title="新增" width="40%" :visible.sync="addButtonController" @close="closeDialog('ruleForm')">
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="Roles" :model="addOrUpdateList" ref="ruleForm">
            <el-form-item label="顾客名称" prop="customerName">
              <el-input v-model="addOrUpdateList.customerName" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入顾客名称"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="addOrUpdateList.sex">
                <el-radio label="男" value="男">男</el-radio>
                <el-radio label="女" value="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="phoneNumber">
              <el-input v-model="addOrUpdateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%"
                        clearable placeholder="请输入电话号码"/>
            </el-form-item>
            <el-form-item label="身份证" prop="identificationCard">
              <el-input v-model="addOrUpdateList.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                        clearable placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="addOrUpdateList.remark" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add('ruleForm')">确定</el-button>
        <el-button @click="closeDialog('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <!--修改弹窗-->
      <el-dialog title="修改" width="40%" :visible.sync="updateButtonController" @close="closeDialog('ruleForm')">
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="Roles" :model="addOrUpdateList" ref="ruleForm">
            <el-form-item label="顾客名称" prop="customerName">
              <el-input v-model="addOrUpdateList.customerName" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入顾客名称"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="addOrUpdateList.sex">
                <el-radio label="男" value="男">男</el-radio>
                <el-radio label="女" value="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="phoneNumber">
              <el-input v-model="addOrUpdateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%"
                        clearable placeholder="请输入电话号码"/>
            </el-form-item>
            <el-form-item label="身份证" prop="identificationCard">
              <el-input v-model="addOrUpdateList.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                        clearable placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="addOrUpdateList.remark" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入备注"/>
            </el-form-item>

          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update('ruleForm')">确定</el-button>
        <el-button @click="closeDialog('ruleForm')">取消</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { insert, queryAll, update } from '@/api/customer'

export default {
  name: 'customer',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      customerName: '',
      phoneNumber: '',
      identificationCard: '',
      selectList: [],
      addButtonController: false,
      updateButtonController: false,
      addOrUpdateList: {
        customerTableId: '',
        customerId: '',
        customerName: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      Roles: {
        customerName: [
          { required: true, trigger: 'blur', message: '用户名不能为空' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, trigger: 'blur', message: '性别不能为空' },
          { min: 1, max: 1, message: '性别只能是一位且必须是男或者女', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, trigger: 'blur', message: '电话号码不能为空' },
          { min: 11, max: 11, message: '请输入合法的电话号码', trigger: 'blur' }
        ],
        identificationCard: [
          { required: true, trigger: 'blur', message: '身份证号不能为空' },
          { min: 18, max: 18, message: '请输入合法身份证号', trigger: 'blur' }
        ]
      }
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    selectAll() {
      queryAll({
        customerName: this.customerName,
        phoneNumber: this.phoneNumber,
        identificationCard: this.identificationCard
      }).then(
        response => {
          this.selectList = response.data
        }
      )
    },
    check() {
      this.customerName = ''
      this.phoneNumber = ''
      this.identificationCard = ''
      this.selectAll()
    },
    addButton() {
      this.addOrUpdateList = {
        customerName: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
        this.addButtonController = true
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insert({
            customerName: this.addOrUpdateList.customerName,
            sex: this.addOrUpdateList.sex,
            phoneNumber: this.addOrUpdateList.phoneNumber,
            identificationCard: this.addOrUpdateList.identificationCard,
            remark: this.addOrUpdateList.remark
          }).then(
            async response => {
              this.selectAll()
              this.addButtonController = false
            }
          )
        } else {
          return false
        }
      })
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
      this.addButtonController = false
      this.updateButtonController = false
    },
    updateButton(row) {
      this.addOrUpdateList = {
        customerTableId: row.customerTableId,
        customerId: row.customerId,
        customerName: row.customerName,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark,
      }
      this.updateButtonController = true
    },
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update({
            customerTableId: this.addOrUpdateList.customerTableId,
            customerId: this.addOrUpdateList.customerId,
            customerName: this.addOrUpdateList.customerName,
            sex: this.addOrUpdateList.sex,
            phoneNumber: this.addOrUpdateList.phoneNumber,
            identificationCard: this.addOrUpdateList.identificationCard,
            remark: this.addOrUpdateList.remark
          }).then(
            async response => {
              this.selectAll()
              this.updateButtonController = false
            }
          )
        } else {
          return false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
